import QtQuick
import QtQuick.Controls
Item {
    Column{

        height: parent.height-5
        width: parent.width-3
        anchors.centerIn: parent
        spacing: 5
        ListModel{
            id:ktabbarview_listmodel

        }
        TabBar{

            id:ktabbarview_tabbar
            implicitWidth: parent.width-5
            anchors.horizontalCenter: parent.horizontalCenter
            implicitHeight: parent.height*0.03
            spacing:3
            // contentHeight:height
            // contentWidth:80



            Repeater{
                // implicitHeight: parent.height
                // implicitWidth: 80
                model: ktabbarview_listmodel
                delegate:TabButton{
                    // Material.color: Material.Blue
                    Material.accent: Material.Blue

                    // color: color_MaterialBlue
                    // anchors.fill: parent

                    // color:index === ktabbarview_swipeview.currentIndex ? "white" : "lightgray"
                    // border.width: 1
                    // border.color: "black"
                    // radius: 4
                    implicitHeight: parent.height
                    implicitWidth: 80
                    Text{
                        anchors.left: parent.left
                        anchors.leftMargin: 4
                        font.pixelSize: 12
                        text:model.tabbarname
                        anchors.verticalCenter: parent.verticalCenter
                    }


                    onClicked: {
                        ktabbarview_tabbar.currentIndex=index
                        console.log(index)
                    }

                    Rectangle{
                        anchors.right: parent.right
                        anchors.rightMargin: 5
                        height:15
                        width: height
                        Material.roundedScale: Material.SmallScale
                        anchors.verticalCenter: parent.verticalCenter
                        // color: "Red"
                        Image{
                            anchors.fill: parent
                            source: "qrc:/ICON/icon/CLOSE.png"
                            fillMode:Image.PreserveAspectCrop
                            smooth: true
                            mipmap: true
                        }

                        MouseArea{
                            anchors.fill: parent
                            onClicked: {
                                ktabbarview_swipeview.removeItem(ktabbarview_swipeview.itemAt(index))
                                ktabbarview_listmodel.remove(index)
                            }

                        }
                    }

                }
            }

        }
        Rectangle{
            anchors.horizontalCenter: parent.horizontalCenter
            color:"black"
            width: parent.width*0.99
            height: 2
        }
        SwipeView{
            clip: true
            id:ktabbarview_swipeview
            implicitWidth: parent.width
            implicitHeight: parent.height*0.95
            currentIndex: ktabbarview_tabbar.currentIndex
            interactive: false

        }

    }

    function appendPage(components){
        var tabbarname=components.tabbarname;
        // var tabbarname="123"
        ktabbarview_swipeview.addItem(components)
        ktabbarview_listmodel.append({"tabbarname":tabbarname})
    }
    function appendPage2(components,tabbarname){
        ktabbarview_swipeview.addItem(components)
        ktabbarview_listmodel.append({"tabbarname":tabbarname})
    }

}
